Este efecto que veremos a continuación no es nada nuevo, sin embargo es un efecto que me gusta porque resulta vistoso y nada cansino ya que se añade a imágenes muy puntuales como por ejemplo la publicidad tal el ejemplo de Tutorialzine
 
Para ponerlo en práctica necesitamos jQuery. Si ya estamos utilizando la librería no tendremos que añadirla, si por el contrario no la usamos añadiremos justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

A continuación añadimos el siguiente script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

 // Lowering the opacity of all slide in divs
 $('.banner div').css('opacity',0.4);

 // Using the hover method
 $('.banner').hover(function(){

  // Executed on mouseenter
  
  var el = $(this);
  
  // Find all the divs inside the banner div,
  // and animate them with the new size
  
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });

 },function(){

  // Executed on moseleave

  var el = $(this);
  
  // Hiding the text
  el.find('p').stop(true,true).hide();
  
  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');

 }).click(function(){
  
  // When clicked, open a tab with the address of the hyperlink
  
  window.open($(this).find('a').attr('href'));
  
 });
});
//]]>
</script>
Los estilos los añadimos como de costumbre justo antes de ]]></b:skin> y veremos que se ha marcado el lugar para poder personalizar a gusto de cada uno respecto a colores:

.bannerHolder {
   background: none repeat scroll 0 0 #ccc; /* color - fondo - bloque */
   border: 1px solid #EEEEEE; /* color de borde del bloque */
   border-radius: 12px 12px 12px 12px;
   float: left;
   height: 310px; /* altura - bloque */
   margin: 20px ;
   padding: 10px 25px;
   width: 270px; /* anchura - bloque */
}
.bannerHolder li {
   display: inline;
   list-style: none outside none;
}
.banner {
   float: left;
   height: 125px;
   margin: 5px;
   overflow: hidden;
   position: relative;
   width: 125px;
   padding:  5px;
}
.banner img {
   border: medium none;
   display: block;
}
.banner div {
   background-color: #000; /* color - efecto */
   border-radius: 100px 100px 100px 100px;
   cursor: pointer;
   height: 60px;
   position: absolute;
   width: 60px;
   z-index: 100;
}
.banner .cornerTL {
   left: -63px;
   top: -63px;
}
.banner .cornerTR {
   right: -63px;
   top: -63px;
}
.banner .cornerBL {
   bottom: -63px;
   left: -63px;
}
.banner .cornerBR {
   bottom: -63px;
   right: -63px;
}
.banner p {
   color: white; /* color del texto */
   text-shadow: 1px 1px 1px #505050; /* sombra - texto */
   cursor: pointer;
   display: none;
   font-family: Tahoma,Arial,Helvetica,sans-serif; /* fuente - texto */
   font-size: 11px; /* tamaño del texto */
   left: 0;
   position: absolute;
   text-align: center;
   top: 57px;
   width: 100%;
   z-index: 200;
}
Añadimos el html justo en el lugar que deseamos mostrar las imágenes con el efecto.

Tenemos un bloque contenedor que es "bannerHolder" y dentro de ese bloque tenemos las imágenes.

<ul class="bannerHolder">
Imágenes
</ul>

Si queremos añadir este mismo ejemplo sin el bloque de fondo simplemente no añadimos bannerHolder ni su respectiva etiqueta de cierre.

<ul class="bannerHolder">
       <li>
  <div class="banner">
  <a href="url-enlace">
 <img src="url-imagen" alt="imagen" width="125" height="125" /></a>

  <p class="companyInfo">Ejemplo-1</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div></li><li>

</ul>
En "Ejemplo-1" es el lugar para añadir un pequeño texto tipo título.
El anterior código es suficiente para una imagen, si deseamos añadir más imágenes añadiremos ese mismo código tantas veces como imágenes deseamos añadir teniendo en cuenta que en caso de añadir el bloque de bannerHolder siempre termina cerrándose con la etiqueta </ul> al final.


Visto en:Tutorialzine

Unknown

Delicado y como dices muy cómodo porque no cansa :) precioso, me encantó, jquery nos sorprende siempre con cosas lindas, gracias por compartirlo abüelita ;)

Muchos besos y abrazos ronroneados ninda ^_^

Responder
Anónimo

¡Hola Gema!

Lo que te pregunto a continuación no está relacionado con la entrada,espero que no te moleste.

Verás,me imagina que ya sabrás que blogger ha incluído los comentarios anidados (responder comentarios),mi deseo es eliminar la fecha y hora de los mismos pero sin suprimir lo de "Responder Suprimir",no sé si me explico,vamos,eliminar la fecha por completo.Otra cosa es que no puedo eliminar los avatares de los comentarios...Siempre me ha gustado que mi blog sea lo más parecido a una web,por eso quiero eliminar esas pequeñas cosillas,hehehe.

¿Cómo puedo hacerlo?,¡muchísimas gracias,eres la mejor de todos/as!

Responder
Unknown

Un lujo, delicadísimo, besitos Abu :P

Responder
Gem@

:: Hola Paula a mi lo que me encantó es verte por aquí y saber que estás bien :)
Es cierto que jQuery es una maravilla, es tentador y casi adictivo :)
Besos y ronroneos para ti linda gatita ;)

:: LAPRAHE pero como me va a molestar mujer? lo que ocurre que tengo que ver esos comentarios para decirte dónde tocar y por lo que veo estás de cambios o mejor dicho no los veo!

:: Besitos para ti también Graciela!! :D

Responder
Anónimo

¡Ahora sí Gema!,ya puedes verlos,hehehe...

Responder
Marcos B.M

excelente recurso, gracias!

Responder
Adrián J. Messina

Muy bueno, siempre con recursos pintorescos!

Responder
María Pilar

¡Qué original y divertido! me gusta mucho. Ya estoy pensando donde aplicarlo.
Me alegra comentar en tu blog, me siento un poco como en casa.
Un fuerte abrazo.

Responder
Gem@

:: LAPRAHE tuve que instalarme tu plantilla porque personalizar las plantillas nuevas Blogger parece qu enos pone a prueba.
Añade lo siguiente en los estilos de tu plantilla y así se oculta la fecha en los comentarios, si con el tiempo cambias de idea simplemente eliminas lo añadido y listo.
.comments .comments-content .datetime {
display: none;
}

:: Me alegra que te guste Marcos B.M :)

:: Adrián J. Messina lo bueno es verte por aquí. Un abrazo :)

:: Hola Pilar, eso es porque estás en casa :D

Responder
Anónimo

Jolín Gema,eres un Solazo de persona,¡muchísimas gracias de corazón!,perdona todas las molestias,en serio,¡muchas gracias!,¡Y un besote enorme! =)

Responder
Gem@

:: Otro beso para ti LAPRAHE :D

Responder
Anónimo

yo tengo un problemita. Mira mi blog: http://doinfo-tube.blogspot.com/
tengo esa barra fronttal con flechas, si lo introdusco el codigo jqui.. se daña.. hay solu cion

Responder
Yornom

Transcribí todo lo que indicas en el post pero las imágenes aparecen en una sola fila. aconséjeme que hacer.

Responder
Gem@

:: JoZze FloXx no puedo responderte sin verlo añadido, inténtalo si quieres en un blog de prueba con la misma plantilla y me lo muestras.

:: Hipodromo Arequipa cuando eso ocurre se prueba a no dejar espacios entre el final y el principio de las líneas de html de esa forma se posicionan en la misma línea.

Responder
Cêz

Hola Gema, después de meses fuera jejeje, me preguntaba que si este código es posible para la cabecera, digo una que cambia de imagen cada cierto tiempo, antes siempre lo encontraba en el Escaparate de Rosa. O hay una entrada especial de ello porque el buscador no medio muchas alternativas.

Muchas gracias y tengas un lindo día

Gem@

Hola Cêz :) este otro es más indicado y ya viene explicado los pasos a seguir (lo de logo cambiante debe ser que estaba medio dormida en ese momento)
http://www.gemablog.com/2006/10/logo-cambiante.html

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top